<template>
	<view class="container">
		<scroll-view scroll-y class="page-wrap">
			<view v-if="houseList.length > 0" v-for="house in houseList" :key="house.id" class="house-item">
				<view class="info">
					<text class="title">{{ house.communityName }}</text>
					<text class="address">{{ house.building }}栋{{ house.unit }}单元{{ house.roomNo }}</text>
					<text class="area">建筑面积 {{ house.area }}㎡</text>
					<view class="status-tag" :class="house.status">
						{{ house.status | statusText }}
					</view>
				</view>
				<view class="actions">
					<view class="btn edit" @click="editHouse(house.id)">编辑</view>
					<view class="btn delete" @click="deleteHouse(house.id)">删除</view>
				</view>
			</view>
		</scroll-view>
		<uni-fab class="fab-button" @fabClick="addHouse" :pattern="{ color: '#fff', backgroundColor: '#007AFF' }" />
	</view>
</template>

<script>
import { request } from '@/util/request.js'

export default {
	data() {
		return {
			houseList: [
				{
					id: 1,
					communityName: '小区A',
					building: 'A栋',
					unit: '1单元',
					roomNo: '101',
					area: 100,
					status: 1
				},
				{
					id: 2,
					communityName: '小区B',
					building: 'B栋',
					unit: '2单元',
					roomNo: '201',
					area: 120,
					status: 2
				},
				{
					id: 3,
					communityName: '小区C',
					building: 'C栋',
					unit: '3单元',
					roomNo: '301',
					area: 150,
					status: 3
				}
			]
		}
	},
	filters: {
		statusText(status) {
			const map = { 1: '已入住', 2: '未交付', 3: '装修中' }
			return map[status] || '未知状态'
		}
	},
	onShow() {
		//this.loadHouses()
	},
	methods: {
		async loadHouses() {
			const res = await request({
				url: 'owner-server/owner/houses',
				method: 'GET'
			})
			if (res.code === 200) {
				this.houseList = res.data
			}
		},
		addHouse() {
			uni.navigateTo({ url: '/pages/addHouse/addHouse' })
		},
		editHouse(id) {
			uni.navigateTo({ url: `/pages/addHouse/addHouse?id=${id}` })
		},
		async deleteHouse(id) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除该房屋信息吗？',
				success: async (res) => {
					if (res.confirm) {
						await request({
							url: `owner-server/owner/houses/${id}`,
							method: 'DELETE'
						})
						this.loadHouses()
					}
				}
			})
		}
	}
}
</script>

<style scoped>
.page-wrap {
	height: calc(100vh - 120rpx);
	padding: 30rpx;
}

.house-item {
	display: flex;
	background: #fff;
	width: 650rpx;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.info {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 8rpx;
}

.address {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 8rpx;
}

.area {
	font-size: 24rpx;
	color: #999;
}

.status-tag {
	align-self: flex-start;
	padding: 4rpx 12rpx;
	border-radius: 24rpx;
	font-size: 24rpx;
	margin-top: 12rpx;
}

.status-tag[class='1'] {
	background: #e8f5e9;
	color: #2e7d32;
}

.status-tag[class='2'] {
	background: #fff3e0;
	color: #ef6c00;
}

.status-tag[class='3'] {
	background: #fbe9e7;
	color: #d32f2f;
}

.actions {
	display: flex;
	flex-direction: column;
	margin-left: 24rpx;
}

.btn {
	padding: 12rpx 24rpx;
	border-radius: 40rpx;
	font-size: 26rpx;
	text-align: center;
	margin: 8rpx 0;
}

.edit {
	background: #007AFF;
	color: #fff;
}

.delete {
	background: #ff4444;
	color: #fff;
}

.fab-button {
	position: fixed;
	bottom: 60rpx;
	right: 30rpx;
	z-index: 999;
}
</style>
